<div class="userTemplate">
    <div class="row">
        <div class="col-md-12">
            <div class="sortOrder">
                <span class="fontSorted">Sorted By:</span>
                <span class="filters" [ngClass]="{'setFilterColor':date}" (click)="userListFilter('createdAt', 'descending')">Reported On</span>
                <div [hidden]="!date" [ngClass]="{'upDown':date}">
                    <span><i class="ion-arrow-up-a" [ngClass]="{'upDownIcon':upIcon}"
                             (click)="upIcon=true;downIcon=false;userListFilter('createdAt', 'ascending')"></i></span>
                    <span><i class="ion-arrow-down-a" [ngClass]="{'upDownIcon':downIcon}"
                             (click)="upIcon=false;downIcon=true;userListFilter('createdAt', 'descending')"></i></span>
                </div>
                <span class="filters" [ngClass]="{'setFilterColor':userName}" (click)="userListFilter('Title', 'ascending' )">Title</span>

                <div [hidden]="!userName" [ngClass]="{'upDown':userName}">
                    <span><i class="ion-arrow-up-a" [ngClass]="{'upDownIcon':!upIcon}"
                             (click)="upIcon=false;downIcon=true;userListFilter('Title', 'ascending' )"></i></span>
                    <span><i class="ion-arrow-down-a" [ngClass]="{'upDownIcon':!downIcon}"
                             (click)="upIcon=true;downIcon=false;userListFilter('Title', 'descending')"></i></span>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-sm-12">
            <div class="col-sm-12 userFilter new">
                <div class="col-sm-2 categoriesboxs  titles">
                    <button class="btn dropdown-toggle zoombtn leftAlign togglebutton" type="button" data-toggle="dropdown">{{category}}
                    </button>
                    <ul class="dropdown-menu leftAlign downbutton title">
                        <li class="underln" (click)="category='Category';showTextbox()">Category</li>
                        <li class="underln" (click)="category='Title';showTextbox();">Title</li>
                        <li class="underln" (click)="category='User';showTextbox()">User</li>
                        <li class="underln" (click)="category='Reason';showTextbox()">Reason</li>
                    </ul>
                </div>
                <div *ngIf="inputTag" class="col-sm-4 categoriesboxs">
                    <div class="tagdiv">
                        <input type="text" class="form-control" [(ngModel)]="searchType" (keypress)="onKeyPressAbuse($event)" placeholder="Search By {{category}}" />
                    </div>
                </div>

                <div *ngIf="selectTag" class="col-sm-4 categoriesboxs  title">
                    <button class="btn dropdown-toggle zoombtn leftAlign togglebutton next" type="button" data-toggle="dropdown">{{searchType}}
                    </button>
                    <ul class="dropdown-menu leftAlign downbutton categories">
                        <li class="underln" (click)="searchType=firstReason;">{{firstReason}}</li>
                        <li class="underln" (click)="searchType=secondReason;">{{secondReason}}</li>
                        <li class="underln" (click)="searchType=thirdReason;">{{thirdReason}}</li>
                        <li class="underln" (click)="searchType=forthReason;">{{forthReason}}</li>
                    </ul>
                </div>
                <div class="col-sm-2 dateheight">
                    <div class="date-input">
                        <label class="fromToDates newerdt">From Date</label>
                    </div>
                    <div class="col-sm-12 col-md-12 formatdatepicker mydate">

                        <my-date-picker [options]="myDatePickerOptions" [selDate]="fromDate" (dateChanged)="onFromDateChanged($event)"></my-date-picker>
                    </div>

                </div>
                <div class="col-sm-2 dateheight">
                    <div class="date-input seconddatepicker">
                        <label class="fromToDates newerdt">To Date</label>
                    </div>
                    <div class="col-sm-12 col-md-12 formatdatepicker mydate">
                        <my-date-picker [options]="myDatePickerOptions" [selDate]="toDate" (dateChanged)="onToDateChanged($event)"></my-date-picker>
                    </div>

                </div>


                <div class="col-sm-2 categoriesboxs searchbutton">
                    <button type="button" class="btn btn-default btn-auth postbutton" (click)="getUserLists()">Search
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-12 col-md-12 spaceOfCard"></div>
    <div class="col-lg-12 col-md-12 setLength">
        <ba-card baCardClass="with-scroll table-panel cardHeight">
            <div class="table-responsive">
                <table class="table table-striped alignTable">
                    <thead>
                        <tr>
                            <th class="textBold">Reported On</th>
                            <th class="textBold">User</th>
                            <th class="textBold">Title</th>
                            <th class="textBold">Category</th>
                            <th class="textBold">Reason</th>
                            <th class="textBold">Spam</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let users of allusers ">
                            <td>{{ formateDate(users.createdAt) }}</td>
                            <td class="userName" (click)="viewProfile(users.user); Modal.open()">{{ users.name}}</td>
                            <td class="userName" (click)="getIdeaIdForAbuse(users);">{{ users.title}}</td>
                            <td>{{ users.category }}</td>
                            <td>{{ users.reason }}</td>
                            <td><label class="switch"><input type="checkbox" [ngModel]="users.spam"
                                                         (click)="getDataForSpam(users);">
                            <div class="slider round"></div>
                        </label>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div *ngIf="noContent" class="noAbuseContent">
                    No Data
                </div>
            </div>
        </ba-card>
    </div>
    <pagination [totalItems]="totalItem" [(ngModel)]="currentPage" (pageChanged)="pageChanged($event)" [maxSize]=5 [rotate]="false"></pagination>

    <div *ngIf="userModal" class="userModal">
        <div class="user-modal-content">
            <span class="userModalClose" (click)="userModal=false"><i class="ion-close-round"></i></span>
            <p>Click on submit to update user status?</p>
            <div class="userModalButtons">
                <button class="btn btn-default btn-auth postbutton userModalOk" (click)="activateUser()">Submit</button>
                <button (click)="closeUserModal();" class="btn btn-default btn-auth postbutton userModalCancel">Cancel
                </button>
            </div>
        </div>
    </div>
</div>
<div class="userAbuseModelAdmin">
    <modal #Modal>
        <modal-header>
            <userprofile></userprofile>
        </modal-header>
    </modal>
</div>
<div class="userAbuseModelAdmin">
    <modal #ViewDetailIdeaModel>
        <modal-header>
            <viewCardIdeaDetail (notifyParent)="getNotificationModal($event);" #viewCardIdeaDetail [viewDetailIdea]="viewDetailIdea" (notifyParenttoProfile)="notifyParenttoProfileModal($event)"></viewCardIdeaDetail>
        </modal-header>
    </modal>
</div>
<modal #abuseModal modalClass="abuse-popup">
    <modal-header>
        <abuse [idea]="abuseIdea" (notifyAbuseModal)="getNotificationAbuseModal($event)"></abuse>
    </modal-header>
</modal>

<div *ngIf="spamModal" class="spamModal">
    <div class="spam-modal-content">
        <p class="spamCommentTitle">Type your reason... <span class="spamClose" (click)="closeSpamForm();"><i
                class="ion-close-round"></i></span>
        </p>
        <textarea class="reasonText" [(ngModel)]="spamReason" (keypress)="onKeyPressAbuse($event)"></textarea>
        <br>
        <div class="spamButtons">
            <button class="btn btn-default btn-auth postbutton spamOk" (click)="setSpamDataForIdea();">Confirm</button>
            <button (click)="closeSpamForm();" class="btn btn-default btn-auth postbutton spamCancel">Cancel</button>
        </div>
    </div>
</div>